<script setup lang="ts">
import { HlTableRender } from 'hl-table-render';
import 'hl-table-render/dist/hl-table-render.css';
import { reactive, ref } from 'vue';

const hlTableRenderRef = ref();
const state = reactive({
  mode: 'editable',
  renderData: {
    rows: [
      ['101纳税申报企业类型(填写代码)', '纳税代码', '102分支机构就地纳税比例(%)', '102'],
      ['103资产总额(填写平均值，单位：万元)', 'mima', '104从业人数(填写平均值，单位：人)', ''],
      ['105所属国民经济行业(填写代码)', true, '106从事国家限制或禁止行业', '2025年01月01日'],
      ['107适用会计准则或会计制度(填写代码)', '', '108采用一般企业财务报表格式(2019年)版', ''],
      ['aa', 'bb', 'cc', 'dd'],
      ['ee', 'ff', 'gg', 'hh'],
    ],
    mergeCells: [
      { row: 4, col: 0, rowspan: 2, colspan: 2}
    ],
    cellComments: [
      {
        row: 0,
        col: 2,
        comment: {
          value: '初始化批注'
        }
      },
      {
        row: 2,
        col: 3,
        comment: {
          value: '随便一点批注'
        }
      }
    ],
    readOnlyCells: [
        '0-0',
        '2-0',
        '0-2',
        '2-2',
        '3-2'
    ],
    cellTypeList: [
        {
          row: 0,
          col: 1,
          type: 'text',
        },
        {
          row: 0,
          col: 3,
          type: 'numeric',
        },
      {
        row: 1,
        col: 1,
        type: 'password'
      },
      {
        row: 1,
        col: 3,
        type: 'autocomplete',
        source: ['aa', 'bb', 'cc', 'dd'],
        strict: false
      },
      {
        row: 2,
        col: 1,
        type: 'checkbox',
        label: {
          position: 'after',
          value: '真的吗？'
        }
      },
      {
        row: 2,
        col: 3,
        type: 'date',
        dateFormat: 'YYYY年MM月DD日'
      },
      {
        row: 3,
        col: 1,
        type: 'dropdown',
        source: ['aa', 'bb', 'cc', 'dd'],
      },
    ]
  }
});
const clickGetTableConfig = () => {
  console.log(hlTableRenderRef.value.getTableConfig());
};
</script>

<template>
  <div class="box">
    <n-button @click="clickGetTableConfig">获取表格数据</n-button>
    <HlTableRender ref="hlTableRenderRef" :mode="state.mode" :render-data="state.renderData"  />
  </div>
</template>

<style scoped lang="scss">
.box {
  margin: 50px auto;
  width: 80%;
}

</style>
